<template>
	<div>
		<!-- 运单装车提示窗 -->
		<uni-popup ref="truckLoadingDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认装车" title="运单装车"
				@confirm="truckLoadingDialogConfirm" :before-close="true" @close="closeDialog('truckLoadingDialog')">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 300px;">
					<view style="display: flex;flex-direction: column;width: 100%;">
						<view style="display: flex;">
							<text style="width: 75px;">发货批次：</text>
							<text style="font-weight: bold;margin-left: 20px;">{{formData.scheduleVo?formData.scheduleVo.scheduleNo:'无'}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">承运方：</text>
							<text style="margin-left: 20px;">{{formData.scheduleVo.carrierVo?formData.scheduleVo.carrierVo.carrierName:'无'}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">车型：</text>
							<text style="margin-left: 20px;">{{carType_[formData.scheduleVo.carVo.carType]}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">车牌号：</text>
							<text style="margin-left: 20px;">{{formData.scheduleVo.carVo?formData.scheduleVo.carVo.licensePlate:'无'}}</text>
						</view>
						<!-- <view style="display: flex;">
							<text style="width: 75px;">车辆定位：</text>
							<text style="margin-left: 20px;">{{formData.scheduleVo.scheduleNo}}</text>
						</view> -->
						<view style="display: flex;">
							<text style="width: 75px;">司机：</text>
							<text style="margin-left: 20px;">{{formData.scheduleVo.driverVo?formData.scheduleVo.driverVo.driverName:'无'}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">司机电话：</text>
							<text style="margin-left: 20px;">{{formData.scheduleVo.driverVo?formData.scheduleVo.driverVo.phoneNumber:'无'}}</text>
						</view>
					</view>
					<uni-forms ref="form_truckLoading" :modelValue="formData_truckLoading" :rules="rules_truckLoading" labelWidth="75px">
						<uni-forms-item label="装货人" name="loadUserName" required>
							<uni-easyinput type="text" v-model="formData_truckLoading.loadUserName" placeholder="请输入装货人" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" name="contactPhone" required>
							<uni-easyinput type="number" v-model="formData_truckLoading.contactPhone" placeholder="请输入联系电话" />
						</uni-forms-item>
						<uni-forms-item label="装货费" name="cost">
							<uni-easyinput type="text" v-model="formData_truckLoading.cost" placeholder="请输入装货费" />
						</uni-forms-item>
						<uni-forms-item label="分摊方式" name="allocationMethod">
							<uni-data-select v-model="formData_truckLoading.allocationMethod" :localdata="allocationMethod"
								style="background-color: white;" />
						</uni-forms-item>
						<uni-forms-item label="备注">
							<uni-easyinput type="textarea" v-model="formData_truckLoading.remark" placeholder="装车相关备注说明" />
						</uni-forms-item>
					</uni-forms>
					<view style="height: 50px;"></view>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 取消装车提示窗 -->
		<uni-popup ref="cancelTruckLoadingDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="运单取消装车"
				@confirm="cancelTruckLoadingDialogConfirm">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 100px;">
					<view style="display: flex;flex-direction: column;width: 100%;">
						<!-- <view style="display: flex;">
							<text style="width: 75px;">装货人：</text>
							<text style="font-weight: bold;margin-left: 20px;">Y185655850</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">联系电话：</text>
							<text style="margin-left: 20px;">xxxxx</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">装货费：</text>
							<text style="margin-left: 20px;"></text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">分摊方式：</text>
							<text style="margin-left: 20px;">粤BB46546</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">备注：</text>
							<text style="margin-left: 20px;">xxxxxx</text>
						</view> -->
						<view style="display: flex;margin-top: 10px;color: #bf5f09;">
							<text>*确认取消当前运单{{formData.scheduleNo}}装车</text>
						</view>
					</view>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {
		waybillTruckLoading,
		cancelWaybillTruckLoading,
	} from '@/api/system/waybill.js'
	export default {
		props: {
			data: {
				type: Object,
				default: {}
			},
			waybillId:{
				type: String,
				default:''
			}
		},
		data() {
			return {
				formData:{},
				//装车
				formData_truckLoading:{
					loadUserName:'',
					contactPhone:'',
					cost:'',
					allocationMethod:'',
					remark:''
				},
				// 校验规则->装车
				rules_truckLoading: {
					loadUserName: {
						rules: [{
							required: true,
							errorMessage: '请输入装货人',
						}]
					},
					contactPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '电话格式不正确'
						}
						]
					}
				},
			}
		},
		watch: {
			data: {
			　　handler(newValue, oldValue) {
			　　　	this.formData=newValue
			　　},
			　　deep: true
			},
		},
		methods: {
			//关闭弹窗
			closeDialog(name){
				this.$refs[name].close()
			},
			//装车
			truckLoading(){
				if(this.formData.scheduleStatus=='0'||this.formData.scheduleStatus=='440')
				{
					uni.showToast({
						icon:'none',
						title:'请先完成车辆调度'
					})
					return
				}
				//装车默认装车人、电话为司机和司机电话
				this.formData_truckLoading.loadUserName=this.formData.scheduleVo.driverVo.driverName;
				this.formData_truckLoading.contactPhone=this.formData.scheduleVo.driverVo.phoneNumber;
				this.$refs.truckLoadingDialog.open()
			},
			//确认装车
			truckLoadingDialogConfirm(){
				this.$refs.form_truckLoading.validate().then(res => {
					uni.showLoading({
						title: '正在装车...',
					})
					//装车完成
					this.formData_truckLoading.waybillIds=[parseInt(this.waybillId)]; //装车运单ID集合
					this.formData_truckLoading.type=0;  //类型(0装车1卸车)
					waybillTruckLoading(this.formData_truckLoading).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '装车成功',
								icon: 'none'
							})
							
							this.$refs.truckLoadingDialog.close()
							this.$parent.init()  //调用父组件的init函数，重新加载数据
							//this.$forceUpdate(); //重新加载数据
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
						
					})
				}).catch(err => {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
			//取消装车
			cancleTruckLoading(){
				this.$refs.cancelTruckLoadingDialog.open()
			},
			//确认取消装车
			cancelTruckLoadingDialogConfirm(){
				uni.showLoading({
					title: '正在取消装车...',
				})
				cancelWaybillTruckLoading(0,this.formData.loadId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						uni.showToast({
							title: '取消装车成功',
							icon: 'none'
						})
						
						this.$parent.init()  //调用父组件的init函数，重新加载数据
						//this.$forceUpdate(); //重新加载数据
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
		},
	}
</script>

<style scoped>

</style>